@charset "utf-8";
.web {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #dbdbdb;
    .sec {
        width: 100%;
        height: 80%;
        background: url(../img/award/bg2.png) no-repeat center/100% 100%;
        overflow: hidden;
        .sudoku {
            height: 100%;
            ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                align-items: center;
                height: 100%;
                li {
                    visibility: hidden;
                    float: left;
                    width: 33%;
                    height: 32.8%;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    img {
                        width: 70%;
                        animation-iteration-count: infinite;
                    }
                }
                .active {
                    border: 2px solid rgba(255, 255, 255, 1);
                    border-radius: 5px;
                }
                .yellows {
                    border: 2px solid rgba(124, 252, 0, 1);
                    border-radius: 5px;
                    width: 33%;
                }
            }
        }
        //中奖
        .step1 {
            height: 100%;
            .pic_1 {
                text-align: center;
                padding-top: 60px;
                img {
                    width: 45%;
                }
            }
            .pic_2 {
                text-align: center;
                padding-top: 30px;
                img {
                    width: 50%;
                }
            }
            .pic_3 {
                text-align: center;
                padding-top: 50px;
                img {
                    width: 70%;
                }
            }
        }
        //兑换1
        .step2 {
//          transition: 1s;
            height: 100%;
            background: url(../img/redeem/bg.png) no-repeat center/cover;
            .relation1 {
                text-align: center;
                padding-top: 30px;
                img {
                    width: 45%;
                }
            }
            .relation2 {
                height: 50%;
                width: 80%;
                margin: 0 auto;
                padding-top: 40px;
                ul {
                    margin-top: 30px;
                    li {
                        line-height: 200%;
                        font-size: 14px;
                        &:nth-child(3) {
                            line-height: 400%;
                            color: #e5004f;
                        }
                        &:last-child {
                            input {
                                height: 40px;
                                width: 100%;
                                margin-top: 20px;
                                border: 1px solid;
                                padding: 2px;
                                padding-left: 10px;
                            }
                        }
                    }
                }
            }
            .relation3 {
                text-align: center;
                padding-top: 60px;
                img {
                    width: 80%;
                }
            }
        }
        //兑换2
        .step3 {
//          transition: 1s;
            height: 100%;
            overflow: hidden;
            background: url(../img/redeem/bg.png) no-repeat center/cover;
            .rela1 {
                text-align: center;
                padding-top: 30px;
                img {
                    width: 45%;
                
                }
            }
            .rela2 {
                height: 50%;
                width: 80%;
                margin: 0 auto;
                padding-top: 30px;
                ul {
                    margin-top: 30px;
                    li {
                        font-size: 14px;
                        &:first-child {
                            color: #e5004f;
                        }
                        &:last-child {
                            width: 40%;
                            height: 40%;
                            margin: 0 auto;
                            img {
                                width: 100%;
                                margin-top: 35px;
                            }
                        }
                    }
                }
            }
            .rela3 {
                text-align: center;
                padding-top: 70px;
                img {
                    width: 60%;
                    margin-top: 10px;
                }
            }
        }
    }
    .explain {
        width: 326px;
        height: 443px;
        position: absolute;
        border-radius: 10px;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 2;
        background: url(../img/explain_03.png) no-repeat center/cover;
        img {
            width: 11%;
            position: absolute;
            right: 0;
            transform: translate(50%, -50%);
        }
    }
}

@keyframes gogo {
    from {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    to {
        transform: scale(1);
    }
}

//pointer-events:none;
//禁止图片的点击事件，例如长按保存图片